<template>
  <div class="video">

      <div style="width: 100%">
        <img width="100%;" src="../../../assets/images/swipe1.jpg" />
      </div>
    <router-link :to="'/video/tetper/'" >params</router-link>
    <ul class="video-ul">
      <li v-for="item in lidata" :key="item.index" :class="{active:isActive==item.index}"  @click="changeClass(item.index)">
        <span style="display:block;font-size: 0.3rem;"> {{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: 'Video',
  data () {
    return {
      isActive: 0,
      lidata: [
        {index: 0, name: '选课间'},
        {index: 1, name: '已购买'}
      ]
    }
  },
  methods: {
    ...mapMutations([ 'SET_ISBOTTOM'
    ])
  },
  created () {
    this.SET_ISBOTTOM(1)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .video{
  }
  .video-ul{
    list-style:none; /* 去掉ul前面的符号 */
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: auto; /* 宽度根据元素内容调整 */
  }
  .video-ul >li{
    list-style:none;
    float:left;
    width:50%;
    margin-bottom: 0.01rem;
    height: 0.9rem;
    line-height: 1rem;
  }
</style>
